<template>
  <div>

    <page-tools :show-before="true">
      <span slot="before">有0条考勤审批未处理</span>
      <template slot="after">
        <el-button size="small" type="danger" @click="$router.push('/import')">导入</el-button>
        <el-button size="small" type="warning">提醒</el-button>
        <el-button size="small" type="primary">设置</el-button>
        <el-button size="small">历史归档</el-button>
        <el-button size="small" type="primary">202103报表</el-button>
      </template>
    </page-tools>
    <el-card class="box-card">
      <!-- <div class="department">
        <el-form-item label="部门">
          <el-checkbox-group v-model="checkList">
            <el-checkbox label="复选框 A" />
            <el-checkbox label="复选框 B" />
            <el-checkbox label="复选框 C" />
          </el-checkbox-group>
        </el-form-item>
        <div>
          <template>

            <el-radio v-model="radio" label="1">备选项</el-radio>
            <el-radio v-model="radio" label="2">备选项</el-radio>
          </template>
        </div>
      </div> -->
      <el-form>
        <el-form-item label="部门:">
          <el-checkbox-group v-model="checkList" @change="filterChange">
            <el-checkbox v-for="val in feparfom" :key="val.id" :label="val.name" name="type" />
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="考勤状态:">
          <el-radio-group v-model="typeid">
            <el-radio v-for="val in holidayType" :key="val.id" :label="val.id">{{ val.value }}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card>
      <template>
        <el-table
          :data="pagelists"
          border
          style="width: 100%"
        >
          <el-table-column
            type="index"
            label="序号"
            width="120"
          />
          <el-table-column
            prop="username"
            label="姓名"
            width="120"
          />
          <el-table-column
            prop="workNumber"
            label="工号"
            width="120"
          />
          <el-table-column
            prop="departmentName"
            label="部门"
            width="120"
          />
          <el-table-column
            prop="mobile"
            label="手机"
            width="120"
          />

          <el-table-column
            v-for="(val,index) in deydate"
            :key="val"
            :label="val|date"
            width="120"
          >
            <template #default="{row}">
              <div v-if="row.attendanceRecord[index].adtStatu==typeid || typeid===''">
                {{ row.attendanceRecord[index].adtStatu | holidayType }}
              </div>
            </template>
          </el-table-column>

        </el-table>
      </template>
      <el-pagination
        v-if="checkLists.length>pagelist.size"
        style="text-align: center;"
        small
        layout="prev, pager, next"
        :total="checkLists.length"
        @current-change="pagination"
      />
    </el-card>
  </div>
</template>

<script>
import { getDepartments } from '@/api/department'

import { getAttendancesListmock } from '@/api/attendances'
import holidayType from '@/api/constant/attendance'
export default {
  filters: {
    date(val) {
      return val.split('').slice(4, 6).join('') + '月' + val.split('').slice(6, 8).join('') + '号'
    },
    holidayType(id) {
      const obj = holidayType.holidayType.find(item => Number(item.id) === Number(id))
      console.log(id)
      return obj.value
    }
    // adtStatu(id) {
    //   // console.log(id)
    //   return id
    // }

  },
  data() {
    return {
      typeid: '',
      checkList: [],
      tableData: [],
      feparfom: [],
      holidayType: holidayType.holidayType,
      pagelist: {
        page: 1,
        size: 10
      },
      checkLists: []
    }
  },
  computed: {
    deydate() {
      if (this.tableData.length === 0) {
        return
      }
      return this.tableData[0].attendanceRecord.map(itme => itme.day.toString())
    },
    pagelists() {
      const page = this.pagelist.page * this.pagelist.size
      const size = page - this.pagelist.size
      return this.checkLists.slice(size, page)
    }
    // adtStatu() {

    //   return a
    // }
  },
  created() {
    this.getdepar()
    // console.log(this.holidayType)
    getDepartments().then(res => {
      this.feparfom = res.depts
    })
  },
  methods: {
    async getdepar() {
      const res = await getAttendancesListmock()
      this.tableData = res
      this.checkLists = this.tableData
      // console.log(this.tableData)
    },
    pagination(val) {
      this.pagelist.page = val
    },
    filterChange() {
      const res = this.tableData.filter(itme => this.checkList.includes(itme.departmentName)
      )

      this.$nextTick(() => {
        if (this.checkLists.length === 0) {
          this.checkLists = this.tableData
        }
      })

      this.pagelist.page = 1
      this.checkLists = res
    }
  }
}
</script>

<style lang='scss' scoped>
::v-deep .is-always-shadow{
  margin: 10px;
  .has-gutter{
    text-align: center;
  }
}
::v-deep .el-table th{
  text-align: center;
  color: #000;
  background-color: #fafafa;
}
::v-deep .el-table td{
  text-align: center;

}
.box-card  {
padding: 20px 50px;
}
</style>
